<template>
    <div id='container'>
      <p class="login-logintext">登录</p>
      <!-- ~@/assets/login/dipinlogo_login.png -->
      <img class="container-img" src="~@/assets/login/dipinlogo_login.png"/>
      <div class="login-body">
        <van-form>
        <van-field
        name="user"
        type="tel"  
        label="手机号"  
        placeholder="请输入手机号" 
        :rules="[{ required: true, message: '请填写用户名'}]"
        />
        <van-field
        name="password" 
        v-model="password"
        type="password" 
        
        label="密码"
        placeholder="请输入密码" 
        :rules="[{ required: true, message: '请填写密码'}]"
        />
        <div class="register-password">
            <p>新用户注册</p>
            <p class="fore-passord">忘记密码？</p>
            <!-- <router-link to="/register">新用户注册</router-link>
            <router-link class="fore-password" to="/register">忘记密码？</router-link> -->
        </div>
        <div style="margin: 16px;">
            <van-button  block type="info" native-type="submit" to="">登录</van-button>
        </div>
        </van-form> 

        <p class="login-protol">
            <span>登录即同意</span>
            <span class="protocal-btn">《用户隐私协议》</span> 
        </p>
        <p class="login-threethrid">第三方登录</p>
        <div class="share-threethrid">
            <img class="share-wechat" src="~@/assets/login/lgin_qq.png" alt="">
            <img src="~@/assets/login/lgin_qq.png" alt="">
            <img src="~@/assets/login/lgin_qq.png" alt="">
            <img src="~@/assets/login/lgin_qq.png" alt="">
        </div>

      </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                password:'',
            }
        },

        methods:{
            onClick(name,title){
              console.log(name)
            }
            // loginUser() {

            // }
        }

    }
</script>

<style lang="less" scoped>
 #container {
     margin: 0 20px;
     .login-logintext {
         color: rgb(51, 51, 51);
         font-size: 24px;
     }
     .container-img{
         width: 20vw;
         height: 20vw;
         display: block;
         margin: 40px auto 0px;
     }

     .login-body {
         margin: 20px 0px;
     }



     .register-password {
         margin: 20px 0;
         display: flex;
         flex-direction: row;
         align-items: center;
         color: rgb(215, 31, 54);
         .fore-passord {
           margin: 0 0 0 50vw;
           color: rgb(204, 204, 204);
         }
     }

     .login-protol {
        margin:0 0 0 20vw;
        color: rgb(128, 128, 128);
        .protocal-btn {
            color: rgb(215, 31, 54);
        }
     }

     .login-threethrid{
       margin: 5vh 0 0 30vw;
       color: rgb(128, 128, 128);
     }

     .share-threethrid {
        display: flex;
        flex-direction: row;
        padding-top: 5vh;
        img{
            width: 10vw;
            padding-left:10vw;
            height: 10vw;
        }
     }

 }

</style>







    

<!-- #share-threethrid {
    display: flex;
    flex-direction: row;
    img {
        width: 10vw;
        height: 10vw;
    }
}  -->


 <!-- <van-tabs id="tab-select" @click="onClick">
           <van-tab class="account-login" title="账号登录">
                
           </van-tab> -->
           <!-- <van-tab title="验证码登录">
                <van-form >
                    <van-field name="用户名" label="用户名" placeholder="请输入用户名"   :rules="[{ required: true, message: '请填写用户名'}]"/>
                    <van-field type="password" name="密码" label="密码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码'}]"/>
                    <div>
                        <router-link to="/register">新用户注册</router-link>
                        <router-link to="/register">忘记密码？</router-link>
                    </div>
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">登录</van-button>
                    </div>
                    <p>
                     <span>登录即同意</span>
                     <span>《用户隐私协议》</span> 
                    </p>
                    <p>第三方登录</p>
                    <div id="share-threethrid">
                        <img src="~@/assets/login/lgin_qq.png" alt="">
                        <img src="~@/assets/login/lgin_qq.png" alt="">
                        <img src="~@/assets/login/lgin_qq.png" alt="">
                        <img src="~@/assets/login/lgin_qq.png" alt="">
                    </div>
                </van-form>
           </van-tab> -->
      <!-- </van-tabs>    -->